import React, { useEffect, useState } from "react";
import ReactECharts from "echarts-for-react";
import axios from "axios";
import "../mock/Echarts/data2";
import "../css/Echarts.css";

// 在此组件中绘制一个简单的折线图
const Echart2 = () => {
  useEffect(() => {
    axios.get("/echart2", { dataType: "json" }).then((res) => {
      let op = {
        title: {
          text: null,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          x: "right",
          y: "center",
          icon: "circle",
          align: "left",
          padding: 30,
          textStyle: {
            color: "white",
            fontSize: "14px",
          },
        },
        labelLine: {
          normal: {
            show: false, // show设置线是否显示，默认为true，可选值：true ¦ false
          },
        },
        label: {
          show: true,
          position: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["40%", "50%"],
            data: res.data.data.series,
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: "white",
                    fontSize: 12,
                    fontWeight: "bolder",
                  },
                  formatter: "{b}:{c}",
                },
                labelLine: {
                  lineStyle: {
                    color: "#D8DBE1",
                  },
                },
              },
            },
          },
        ],
      };
      setOption2(op);
    });
  }, []);
  let [option2, setOption2] = useState({});

  return (
    <div>
      <ReactECharts option={option2} />
    </div>
  );
};

export default Echart2;
